<template>
	<view class="loading flex flex-col items-center" v-if="!destory" :class="{
		end:next
	}">
		<image class="image" src="../static/loding.png" mode="widthFix"></image>
		<view class="progress">
			<view class="progress-content" :style="{
				width:progress + '%'
			}">

			</view>
		</view>
		<view class="loading-text">
			{{end ? '加载成功' : '加载中...'}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "loding",
		data() {
			return {
				end: false,
				progress: 10,
				destory: true,
				next: false
			};
		},
		onLoad() {

		},
		methods: {
			destoryed(cb) {
				this.progress = 100
				this.end = true
				this.destory = true
				cb && cb()
				// setTimeout(() => {
				// 	this.next = true
				// }, 500)
				// setTimeout(() => {
				// 	this.destory = true
				// 	cb && cb()
				// }, 800)
			},
			init() {
				this.end = this.$options.data().end
				this.progress = this.$options.data().progress
				this.destory = false
				this.next = this.$options.data().next
			}
		}
	}
</script>

<style scoped>
	.loading {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2024;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		transition: all 0.2s;
	}

	.end {
		/* opacity: 0; */
		transform: translateX(-100vw);
	}

	.image {
		width: 206rpx;
		height: 187rpx;
		margin: 302rpx 0 82rpx;
		animation: ani 0.5s infinite cubic-bezier(0, 0.37, 0.4, 1.12) alternate-reverse;
	}

	@keyframes ani {
		from {
			transform: translateY(20rpx);
		}

		to {
			transform: translateY(0);
		}
	}

	.progress {
		width: 310rpx;
		height: 24rpx;
		background: #FDFF90;
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		opacity: 1;
		position: relative;
	}

	.progress-content {
		width: 50%;
		height: 100%;
		background: #FF9900;
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		opacity: 1;
		position: absolute;
		left: 0;
		top: 0;
		transition: all 1s;
	}

	.loading-text {
		font-size: 22rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 44rpx;
		margin-top: 24rpx;
	}
</style>